<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>控制后台</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/static/layui/css/layui.css" />
	<link rel="stylesheet" href="/static/ui/css/ui.css" />
	<link rel="stylesheet" href="/static/ui/admin/css/other/person.css" />
	<style>
		.square {
			position: relative;
			width: 100%;
			height: 0;
			padding-bottom: 100%;
			/* padding百分比是相对父元素宽度计算的 */
			margin-bottom: 30px;
		}

		.square-inner {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			/* 铺满父元素容器，这时候宽高就始终相等了 */
		}

		.grid {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			/* 相当于 1fr 1fr 1fr */
			grid-template-rows: repeat(6, 1fr);
			/* fr单位可以将容器分为几等份 */
			grid-gap: 1%;
			/* grid-column-gap 和 grid-row-gap的简写 */
			grid-auto-flow: row;
		}

		.grid>div {
			font-size: 14px;
			line-height: 2;
			text-align: center;
		}

		.grid>div i {
			font-size: 40px;
		}
	</style>
</head>

<body class="pear-container" id="body"></body>
<script id="tpl" type="text/html">
	<div class="layui-row layui-col-space10">
		
		<div class="layui-col-md9">
			<div class="layui-card">
				<div class="layui-card-header">
					快捷菜单
				</div>
				<div class="layui-card-body">
					<div class="layui-row layui-col-space10" style="padding-bottom: 15px;">
						{{# layui.each(d.desktops, function(index, el){ }}
						
						<div class="layui-col-xs4 layui-col-sm3 layui-col-md2" style="text-align:center;margin-top:15px">
							<div class="pear-card quickto" data-id="{{= el.id }}" data-title="{{= el.title }}"
								data-url="{{= el.href }}">
								<i class="layui-icon {{= el.icon }}" style="font-size: 30px;color: #1E9FFF;"></i>
							</div>
							<span class="pear-card-title">{{= el.title }}</span>
						</div>
						{{#  }); }}
					</div>
					

				</div>
			</div>
		</div>
		
		<div class="layui-col-md3">
			<div class="layui-card">
				<div class="layui-card-body" style="padding: 25px;">
					<div class="text-center layui-text">
						<div class="user-info-head" id="userInfoHead">
							<img src="{{= d.user.avatar }}" id="userAvatar" width="115px" height="115px" alt="">
						</div>
						<h2 style="padding-top: 20px;font-size: 20px;">{{= d.user.name }}</h2>
						<p style="padding-top: 8px;margin-top: 10px;font-size: 13.5px;">{{= d.user.remark }}</p>
					</div>
				</div>
				<div
					style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13.5px;">
					<span>今日事 ，今日毕</span>
				</div>
			</div>

			<div class="layui-card">
				<div class="layui-card-header">
					消息
				</div>
				<div class="layui-card-body">
					<ul class="list">
						{{# layui.each(d.msglist, function(index, el){ }}
						<li class="list-item"><span class="title">{{= el.msg }}</span><span class="footer">{{= el.add_time }}</span></li>
						{{#  }); }}
					</ul>
				</div>
			</div>
		</div>


	</div>
</script>
<script src="/res/group/config.js"></script>
<script src="/static/layui/layui.js"></script>
<script src="/static/ui/ui.js"></script>
<script>
	layui.use(['layer', 'element', 'laytpl'], function () {
		var $ = layui.jquery,
			layer = layui.layer,
			laytpl = layui.laytpl;
		_get(layui, 'index/welcome', res => {
			laytpl($('#tpl').html()).render(res, function(string){
				//console.log(string);
				$("#body").html(string)
			});
		})
		$("body").on("click", "[data-url]", function () {
			parent.layui.tab.addTabOnlyByElem("content", {
				id: $(this).attr("data-id"),
				title: $(this).attr("data-title"),
				url: $(this).attr("data-url"),
				close: true
			})
		})

	});
</script>


</html>